<template>
    <div class="main">
        <div class="kinds clearfix">
            <!-- {{ goods }} -->
            <div
                class="goods fl"
                v-for="(item, index) in goods"
                :key="index"
                @click="toGoodsDetail(item.sku_id)"
            >
                <div class="first-row">
                    <img :src="item.image" alt="" />
                </div>
                <div class="second-row dian2">
                    {{ item.name }}
                </div>
                <div class="third-row">
                    <small>￥</small>
                    <span>{{ item.p_price }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { getKindGoods } from "@/network/home";
import { toGoodsDetail } from "@/utils/goods"

let kindId = defineProps(["kindId"])
let goods = ref([]);
// 申明一个变量用来存储现在是多少页
let page = ref(1);
onMounted(() => {
    getKindGoodsData(1, 1);
})

const getKindGoodsData = (kindId, page) => {
    getKindGoods(kindId, page).then(res => {
        let serverData = res.data;
        console.log(serverData)
        for (let i in serverData) {
            let jsonData = JSON.parse(serverData[i])
            goods.value.push(jsonData);
        }
    })
}

watch(kindId, (newValue, oldValue) => {
    console.log(newValue.kindId);
    goods.value = [];
    getKindGoodsData(newValue.kindId, 1);
    page.value = 1;
})

// 翻页功能实现
const windowScroll = () => {
    // 可视区域的高度, 就是我们用眼睛能看见的内容的高度
    let clientHeight = document.documentElement.clientHeight;
    // 滚动条在文档中的高度的位置(滚出可见区域的高度)
    let scrollTop = document.documentElement.scrollTop;
    // 所有内容的高度
    let scrollHeight = document.documentElement.scrollHeight;


    if (clientHeight + scrollTop >= scrollHeight) {
        // console.log(kindId.kindId)
        page.value += 1;
        getKindGoodsData(kindId.kindId, page.value);
    }
}

window.addEventListener("scroll", windowScroll);

</script>

<style lang="less" scoped>
.main {
    margin-top: 10px;
    .kinds {
        width: var(--content-width);
        margin: 0 auto;
        .goods {
            background-color: #fff;
            width: 232px;
            height: 320px;
            // margin-right: 10px;
            margin-bottom: 10px;
            &:hover {
                cursor: pointer;
            }
            &:not(:nth-child(5n)) {
                margin-right: 10px;
            }
            .first-row {
                height: 230px;
                line-height: 230px;
                text-align: center;
                img {
                    width: 150px;
                    height: 150px;
                }
            }
            .second-row {
                font-size: 14px;
                font-weight: 700;
                color: #666;
                width: 190px;
                height: 40px;
                line-height: 20px;
                margin: 0 auto;
                &:hover {
                    color: red;
                }
            }
            .third-row {
                color: red;
                width: 190px;
                margin: 0 auto;
                margin-top: 20px;
                span {
                    font-weight: 700;
                    font-size: 20px;
                }
            }
        }
    }
}
</style>